<template>
  <ContentWrap>

    <div>
      <div class="title">{{ typeName }}</div>
      <div>
        <el-table :data="list" border style="width: 100%">
          <el-table-column prop="className" label="问题" width="800" />
          <el-table-column prop="category" label="答案选择" width="800">
            <template #default="scope">


              <div>
                <el-select
                  v-if="scope.row.category == 207 || scope.row.category == 208 || scope.row.category == 209 "
                  class="m-2" placeholder="请选择"  @click="getCate(scope.row)"
                  v-model="scope.row.resultValue">
                  <el-option v-for="item in categorys" :key="item" :label="item" :value="item" />
                </el-select>
              </div>

              <div>
                <el-select multiple
                  v-if="scope.row.category == 301"
                  class="m-2" placeholder="请选择"  @click="getCate(scope.row)"
                  v-model="scope.row.valueArr">
                  <el-option v-for="item in categorys" :key="item" :label="item" :value="item" />
                </el-select>
              </div>

              <div class="m-2">
                <el-input style="width: 215px;" v-model="scope.row.resultValue" placeholder="请输入"
                          v-if="scope.row.category == 0"  />
              </div>


              <div class="m-2" v-if="scope.row.category == 1 || scope.row.category == 2 || scope.row.category == 203 || scope.row.category == 204 && scope.row.className!='' ">
                <el-input style="width: 215px;"  v-model="scope.row.resultValue" placeholder="请输入"
                          @input="handleInput(scope.row.category)"
                          oninput="value=value.replace(/[^\-?\d.]/g,'')
　　                      .replace(/^\./g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')
　　                      .replace('-','$#$').replace(/\-/g,'').replace('$#$','-')"/>
                <el-text>{{scope.row.units}}</el-text>
              </div>

              <div class="m-2" v-if="scope.row.category == -1">
                <div class="input-container">
                  <el-text  >
                    <el-input style="width: 215px;" v-model="totalTj"  readonly oninput="" ></el-input>
                  </el-text>
                </div>
              </div>

              <div class="m-2" v-if="scope.row.category == -2">
                <div class="input-container">
                  <el-text  >
                    <el-input style="width: 215px;" v-model="totalTjTwo"  readonly oninput="" ></el-input>
                  </el-text>
                </div>
              </div>

              <div class="" v-if="scope.row.category == 200">
                <div class="m-2">
                  <el-input style="width: 215px;" v-model="scope.row.param1"  oninput="value=value.replace(/[^\-?\d.]/g,'')
　　                      .replace(/^\./g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')
　　                      .replace('-','$#$').replace(/\-/g,'').replace('$#$','-')" placeholder="请输入"></el-input>
                  <el-text>{{scope.row.units}}</el-text>
                </div>
              </div>


              <div class="m-2" v-if="scope.row.category == 201">
                <div class="input-container">
                  <el-text>连续逾期 </el-text>
                  <el-input style="width: 155px;" v-model="scope.row.param1" oninput="value=value.replace(/[^\-?\d.]/g,'')
　　                      .replace(/^\./g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')
　　                      .replace('-','$#$').replace(/\-/g,'').replace('$#$','-')" placeholder="请输入连续逾期"></el-input>
                  <el-text>{{scope.row.units}}</el-text>
<!--                  <el-input v-if="scope.row.units" v-model="scope.row.units" disabled></el-input>-->
                </div>

                <div class="input-container">
                  <el-text>累计逾期 </el-text>
                  <el-input style="width: 155px;" v-model="scope.row.param3" oninput="value=value.replace(/[^\-?\d.]/g,'')
　　                      .replace(/^\./g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')
　　                      .replace('-','$#$').replace(/\-/g,'').replace('$#$','-')" placeholder="请输入累计逾期"></el-input>
                  <el-text>{{scope.row.units}}</el-text>
<!--                  <el-input v-if="scope.row.units" v-model="scope.row.units" disabled></el-input>-->
                </div>
              </div>


            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <footer>

      <div class="btns" @click="sale">保存</div>
    </footer>

  </ContentWrap>

</template>


<script lang="ts" setup>
import * as UsersApi from "@/api/hutai/salesman";
import { ElMessage } from 'element-plus'
import { ref } from "vue";
import { useRoute } from 'vue-router';
import {getAgentPublicitySelectListByTypesName} from "@/api/hutai/salesman";
const route = useRoute();
const typeName = ref('')
const id = route.query.id
const orderId = route.query.orderId
const totalTj = ref(0)
const totalTjTwo = ref(0)
// const menuList = reactive([
//   { id: 1, name: '按揭房信贷' },
//   { id: 2, name: '保单贷' },
//   // { id: 3, name: '创业贴息贷款' },
//   { id: 4, name: '工薪贷' },
//   { id: 5, name: '公积金贷' },
//   // { id: 6, name: '企业信用贷款' },
//   { id: 7, name: '全款车按揭车信贷' },
//   { id: 8, name: '商业商住楼写字楼厂房一抵押' },
//   { id: 9, name: '商业商住楼写字楼二次抵押' },
//   { id: 10, name: '商业写字楼按揭贷款' },
//   { id: 11, name: '企业税贷' },
//   { id: 12, name: '企业流水贷' },
//   { id: 13, name: '企业发票贷' },
//   { id: 14, name: '住宅按揭贷款' },
//   { id: 15, name: '住宅抵押' },
//   { id: 16, name: '住宅二次抵押' }
// ])

let list = ref([])

const getList = async () => {
  list.value = await UsersApi.getAgentPublicitySelectListByTypesName(id,orderId)
  list.value.map(v => {
    typeName.value = v.typeNames
    v.pid = v.id
    v.left = false
    if (v.category == '0') {
      v.left = true
      v.category = ''
    }else if (v.category == -1){
      totalTj.value = v.resultValue
    }else if (v.category == -2){
      totalTjTwo.value = v.resultValue
    }else if (v.category == 301){
      totalTjTwo.value = v.resultValue
    }
  })

}

const handleInput = async(n) =>{
  var sum = 0;
  var sumTwo = 0;
  if (n=='1' || n==1) {
    list.value.forEach(v => {
      if (v.category=='1' || v.category==1) {
        var number = Number(v.resultValue)
        if (isNaN(number)) {
          // console.log("ss")
        }else {
          sum += number
        }
      }
    })
    totalTj.value = sum
  }else if (n=='2' || n==2) {
    list.value.forEach(v => {
      if (v.category=='2' || v.category==2) {
        var number = Number(v.resultValue)
        if (isNaN(number)) {
          // console.log("ss")
        }else {
          sumTwo += number
        }
      }
    })
    totalTjTwo.value = sumTwo
  }


}

const categorys = ref([])
const getCate = async (row) => {
  var list = row.admittanceUser.split(',')
  categorys.value = list
}

const sale = async () => {
  let arr = ref([])
  list.value.forEach(v => {
    let obj = ref({})
    let data = v.resultValue ? v.resultValue : ''
    if (v.category == -1) {
      obj.value.resultValue = totalTj.value
    }else if (v.category == 200) {
      obj.value.resultValue = v.param1
      obj.value.param1 = v.param1
    }else if(v.category == 201){
      obj.value.resultValue = v.param1+"-"+v.param3
      obj.value.param1 = v.param1
      obj.value.param3 = v.param3
    }else {
      obj.value.resultValue = data
    }
    obj.value.category = v.category
    obj.value.units = v.units
    obj.value.pid = v.pid
    obj.value.orderId = orderId
    obj.value.categoryName = v.className
    obj.value.isPassed = '1'
    obj.value.typeName = v.typeNames
    arr.value.push(obj.value)
  })

  let parmas = {
    orderId: orderId,
    voList: arr.value
  }

  await UsersApi.saveData(parmas)
  ElMessage({
    type: 'success',
    message: '保存成功',
  })

  //刷新
  getList()

}


/** 初始化 **/
onMounted(() => {
  getList()
});
</script>


<style lang="scss">
.title {
  padding: 20px;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}

.selectBtn {
  width: 200px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border: 1px solid #e8e8e8;
  border-radius: 5px;
}

.btns {
  width: 200px;
  height: 30px;
  padding: 20rpx;
  margin: 20px;
  line-height: 30px;
  color: #fff;
  text-align: center;
  cursor: pointer;
  background-color: #c96363;
  border-radius: 5px;
}

.input-container .el-input {
  /* 你可以在这里添加一些额外的样式，比如宽度 */
  width: 30%; /* 假设你想要它们平分宽度，并留一点空隙 */
  margin-right: 0.5%; /* 或者使用padding等属性来调整间距 */
}
</style>

